<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script>
        //$()；该方法表示 页面加载完成后，执行括号里面的代码
        $(function(){
            $("#add").click(function(){ //点击 增加按钮，触发括号里面的代码执行
                alert( $("#add_form").serialize());//所有数据以字符串形式抓取
                //发起ajax请求
                $.ajax({
                    type:"post", //提交的方式
                    url:"/admin/add-new",//提交的路径
                    data:$("#add_form").serialize(),//提交的参数
                    dataType:"json",//提交返回的结果类型
                    success:function(result){ //运行完成之后执行的方法。result就是json数据
                        if(result.state == 2000){
                            $("#message").text("增加成功");
                        }else{
                            $("#message").text(result.message);
                        }
                    }
                });
                return false; //取消之前的提交，阻止常规的表单提交造成的页面跳转
            });
        });
    </script>
</head>
<body>
    <h3>增加管理员</h3>
    <form id="add_form" action="" method="">
        <div>
            <label>用户名</label>
            <input  type="text" name="username"/>
        </div>
        <div>
            <label>密码</label>
            <input  type="password" name="password"/>
        </div>
        <div>
            <label>昵称</label>
            <input  type="text" name="nickname"/>
        </div>
        <input type="submit" id="add" value="增加" />
    </form>
    <span id="message"></span>
</body>
</html>